<template>
  <Table
    ref="tableRef"
    :url="URL_QUERYACCOUNTLIST"
    :columns="data.columns"
    :handles="data.handles"
    :toolbar="data.toolbar"
    :query="data.query"
  ></Table>
</template>

<script lang="ts" setup name="accountList">
import Table from '@/components/table/index.vue';
import {
  URL_QUERYACCOUNTLIST,
  resetPassword,
  freezeAccount,
  enableAccount,
  deleteAccount,
} from '@/service/apis/auth';
import { queryDicByParent } from '@/service/apis/api';
import { getRandom6, getMd5 } from '@/utils/utils';

const router = useRouter();

const tableRef = ref();

const emit = defineEmits(['get-update']);
onActivated(() => {
  emit('get-update', (flag: boolean) => {
    if (flag) {
      tableRef.value?.getData();
    }
  });
});

queryDicByParent({
  listDtos: ['accountStatus'],
}).then((res: any) => {
  if (res) {
    data.query[3].props.options = [...res.accountStatus];
  }
});

const data = reactive({
  columns: [
    {
      prop: 'accountCode',
      label: '管理员账号',
    },
    {
      prop: 'accountName',
      label: '管理员姓名',
    },
    {
      prop: 'channelName',
      label: '平台运营商',
    },
    {
      prop: 'orgName',
      label: '归属企业',
    },
    {
      prop: 'roleNames',
      label: '绑定角色',
    },
    {
      prop: 'phone',
      label: '手机号',
    },
    {
      prop: 'status',
      label: '状态',
      template: (row: any, index: number) => {
        return row.status === '1'
          ? `<div style="color:#FA3939;">冻结</div>`
          : `<div style="color:#01C68B;">正常</div>`;
      },
    },
    {
      prop: 'createByName',
      label: '创建人',
    },
    {
      prop: 'createTime',
      label: '创建时间',
    },
  ],
  handles: [
    {
      label: '修改',
      permission: 'accountList.edit',
      disabledFun: (row: any) => {
        return row.id === '1';
      },
      handle: (row: any) => {
        console.log('编辑---', row);
        router.push({
          name: 'accountEdit',
          query: { id: row.id },
        });
      },
    },
    {
      label: '重置密码',
      permission: 'accountList.reset',
      disabledFun: (row: any) => {
        return row.id === '1';
      },
      handle: (row: any) => {
        const pws = getRandom6();
        ElMessageBox.confirm(`是否确定将密码重置为${pws}？`, '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          resetPassword({
            id: row.id,
            password: getMd5(pws),
          }).then((res: any) => {});
        });
      },
    },
    {
      label: '冻结',
      permission: 'accountList.frozen',
      disabledFun: (row: any) => {
        return row.id === '1';
      },
      labelFun: (row: any) => {
        return row.status === '1' ? '恢复' : '冻结';
      },
      colorFun: (row: any) => {
        return row.status === '1' ? '#01C68B' : '#FA3939';
      },
      handle: (row: any) => {
        ElMessageBox.confirm('是否确认执行本操作？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          if (row.status === '1') {
            enableAccount({
              id: row.id,
            }).then((res: any) => {
              row.status = '0';
            });
          } else {
            freezeAccount({
              id: row.id,
            }).then((res: any) => {
              row.status = '1';
            });
          }
        });
      },
    },
    {
      label: '删除',
      permission: 'accountList.delete',
      color: '#FA3939',
      disabledFun: (row: any) => {
        return row.id === '1';
      },
      handle: (row: any) => {
        ElMessageBox.confirm('此操作将永久删除该数据，是否继续？', '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then(() => {
          deleteAccount({
            id: row.id,
          }).then((res: any) => {
            tableRef.value.getData();
          });
        });
      },
    },
  ],
  toolbar: [
    {
      label: '新增',
      permission: 'accountList.add',
      icon: 'icon-add',
      type: 'primary',
      handle: (row: any) => {
        router.push({
          name: 'accountAdd',
        });
      },
    },
  ],
  query: [
    {
      label: '管理员账号',
      prop: 'accountCode',
      comName: 'input',
      props: {
        placeholder: '请输入管理员账号',
      },
    },
    {
      label: '管理员姓名',
      prop: 'accountName',
      comName: 'input',
      props: {
        placeholder: '请输入管理员姓名',
      },
    },
    {
      label: '手机号',
      prop: 'phone',
      comName: 'input',
      props: {
        placeholder: '请输入手机号',
      },
    },
    {
      label: '状态',
      prop: 'status',
      comName: 'select',
      props: {
        placeholder: '请选择状态',
        change: (value: any) => {
          console.log(value);
        },
        options: [] as any,
      },
    },
    {
      label: '归属企业',
      prop: 'orgName',
      comName: 'input',
      props: {
        placeholder: '请输入归属企业',
      },
    },
    {
      label: '绑定角色',
      prop: 'roleName',
      comName: 'input',
      props: {
        placeholder: '请输入绑定角色',
      },
    },
  ],
});
</script>